<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-xs6">
        <div id="urlTree" class="demo-tree-more"></div>
    </div>
    <div class="layui-col-xs6" id="urlForm">

    </div>
</div>
<script>
    var page = {
        prefix: 'url',
        detUrl: "/sysUrl/queryOneByPrimaryKey",
        addUrl: "/sysUrl/insertOne",
        updUrl: "/sysUrl/updateOne",
        delUrl:"/sysUrl/deleteChkIds",
        formArray: [
            "主键|urlId|HIDDEN",
            "父节点编号|parUrlId|HIDDEN",
            "父节点|parUrlName|TEXT|N|Y",
            "名称|urlName|TEXT|Y",
            "描述|urlDesc|TEXT|N",
            "链路|url|TEXT|N",
            "排序|urlSort|NUMBER|Y",
            "类型|urlType:URL_TYPE:t3|DICT|Y",
            "白名单|urlFilter:URL_FILTER:t3|DICT|Y",
            "绑定按钮|eleId|TEXT|N",
            // "角色|roleCode:t3|SEL|Y"
        ]
    }

    // var addHtml = layui.shopx.genForm(page);
    // layui.jquery("#urlForm").html(addHtml);

    layui.http.postRequest("/sysUrl/queryUrlNodeList", 'POST', {}, function suc(data) {
        // console.info("1:"+JSON.stringify(data.rspData));
        var treeModel = [
            {
                "id": "1123400001",
                "title": "创艺装饰",
                "children": JSON.parse(data.rspData)
            }
        ];
        layui.tree.render({
            elem: '#urlTree'
            , data: JSON.parse(JSON.stringify(treeModel))
            // , showCheckbox: true  //是否显示复选框
            , id: 'urlTree'
            , edit: ['add', 'update', 'del']
            , customOperate: true
            , operate: function (obj) {
                if ( obj.type == 'add') {
                    var model = {
                        urlId: obj.data.id
                    }
                    layui.http.postRequest(page.detUrl, 'POST', model, function suc(res) {
                        layer.open({
                            type: 1,
                            title: "菜单新增",
                            content: layui.shopx.genForm(page),
                            minStack: true,
                            area: ['60%', '60%'],
                            maxmin: true,
                            btn: ['确认', '关闭'],
                            id: page.name + "_add",
                            yes: function (index, layero) {
                                layui.form.on('submit(addSubmit)', function (data) {
                                    let newModel = JSON.stringify(Object.fromEntries(Object.entries(data.field).map(([key, value]) => [key.replace('f_' + page.prefix + '_', ''), value])));
                                    layui.http.postRequest(page.updUrl, 'POST', JSON.parse(newModel), function suc(res) {
                                        //刷新树菜单
                                        window.location.reload();
                                    }, null, false, true);
                                });
                            },
                            btn2: function () {
                                layer.closeAll();
                            },
                            success: function (layero, index) {
                                //弹框渲染
                                // 添加form标识
                                layero.addClass('layui-form');
                                // 将保存按钮改变成提交按钮
                                layero.find('.layui-layer-btn0').attr({
                                    'lay-filter': 'addSubmit',
                                    'lay-submit': ''
                                });
                                layui.jquery("#f_url_parUrlName").val(res.rspData.urlName);
                                layui.jquery("#f_url_parUrlId").val(res.rspData.urlId);
                                layui.form.render();
                            }
                        })
                    }, null, false, false);
                }else if ( obj.type == 'update') {
                    var model = {
                        urlId:  obj.data.id
                    }
                    layui.http.postRequest(page.detUrl, 'POST', model, function suc(res) {
                        layer.open({
                            type: 1,
                            title: "菜单新增",
                            content: layui.shopx.genForm(page),
                            minStack: true,
                            area: ['60%', '60%'],
                            maxmin: true,
                            btn: ['确认', '关闭'],
                            id: page.name + "_add",
                            yes: function (index, layero) {
                                layui.form.on('submit(addSubmit)', function (data) {
                                    let newModel = JSON.stringify(Object.fromEntries(Object.entries(data.field).map(([key, value]) => [key.replace('f_' + page.prefix + '_', ''), value])));
                                    layui.http.postRequest(page.updUrl, 'POST', JSON.parse(newModel), function suc(res) {
                                        //刷新树菜单
                                        window.location.reload();
                                    }, null, false, true);
                                });
                            },
                            btn2: function () {
                                layer.closeAll();
                            },
                            success: function (layero, index) {
                                //弹框渲染
                                // 添加form标识
                                layero.addClass('layui-form');
                                // 将保存按钮改变成提交按钮
                                layero.find('.layui-layer-btn0').attr({
                                    'lay-filter': 'addSubmit',
                                    'lay-submit': ''
                                });
                                let newModel = JSON.stringify(Object.fromEntries(Object.entries(res.rspData).map(([key, value]) => [`f_`+page.prefix+`_${key}`, value])));
                                layui.form.val(page.formName, JSON.parse(newModel));
                                layui.form.render();
                            }
                        })
                    }, null, false, false);
                }else if ( obj.type == 'del') {
                    //获取选中的菜单
                    layer.confirm('确认删除菜单及对应的子菜单？', {
                        btn: ['确定', '取消']
                    }, function (index) {
                        console.info(JSON.stringify(obj.data));
                        var ids = extractIds(obj.data).join(',');
                        var model={
                            ids:ids
                        }
                        layui.http.postRequest(page.delUrl, 'POST', model, function suc(res) {
                            window.location.reload();
                        }, null, false, true);
                    });
                }
                // alert(JSON.stringify(data));
                // alert(JSON.stringify(elem));
                return false;
            }
        });
    }, null, false, false);

    /**
     * 获取所有id
     * @param node
     * @returns {*[]}
     */
    function extractIds(node) {
        var ids = [];
        if (node.id) {
            ids.push(node.id);
        }
        if (node.children && node.children.length > 0) {
            node.children.forEach(function(child) {
                ids = ids.concat(extractIds(child));
            });
        }
        return ids;
    }

</script>
</body>
</html>